<template>
  <div>
    <!-- 三级联动全局组件 -->
    <category :isShow="isShow == 0" @getCategoryId="getCategoryId" />
    <el-card class="show">
      <!-- 展示区 -->
      <div v-show="isShow == 0">
        <el-button
          class="btn"
          icon="el-icon-plus"
          type="primary"
          :disabled="!spuList.length"
          @click="addSpu"
          >添加SPU</el-button
        >
        <!-- 展示表格 -->
        <el-table :data="spuList" style="width: 100%" border>
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="spuName"
            label="SPU名称"
            width="width"
          ></el-table-column>
          <el-table-column
            prop="description"
            label="SPU描述"
            width="width"
          ></el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{ row }">
              <el-button
                type="success"
                icon="el-icon-plus"
                size="mini"
                title="添加sku"
                @click="addSku(row)"
              ></el-button>
              <el-button
                type="warning"
                icon="el-icon-edit"
                size="mini"
                title="编辑spu"
                @click="editSpu(row)"
              ></el-button>
              <el-button
                type="info"
                icon="el-icon-info"
                size="mini"
                title="查看当前spu全部sku列表"
                @click="lookSkuList(row)"
              ></el-button>
              <!-- 气泡确认框 -->
              <el-popconfirm
                @onConfirm="confirmDelete(row.id)"
                :title="`确定要删除${row.spuName}吗？`"
                style="margin-left: 10px"
              >
                <el-button
                  title="删除spu"
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  slot="reference"
                ></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[1, 3, 5, 7]"
          :page-size="limit"
          layout=" prev, pager, next, jumper,->,sizes,total "
          :total="total"
          style="text-align: center"
        >
        </el-pagination>
      </div>
      <!-- SPU添加|编辑区 -->
      <spuForm
        :isShow="isShow"
        :category3Id="category3Id"
        @changeIsShow="changeIsShow"
        ref="initSpu"
      />
      <!-- 添加SKU区 -->
      <skuForm
        :isShow="isShow"
        :category1Id="category1Id"
        :category2Id="category2Id"
        :category3Id="category3Id"
        @changeIsShow="changeIsShow"
        ref="initSku"
      />
    </el-card>
    <!-- 展示sku列表区域 -->
    <el-dialog
      :title="`${showSkuList.spuName}的sku列表`"
      :visible.sync="dialogVisible"
      width="width">
      <el-table
        :data="skuList"
        border
        style="width: 100%">
        <el-table-column
          prop="skuName"
          label="名称"
          width="width"
          align="center">
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="width"
          align="center">
        </el-table-column>
        <el-table-column
          prop="weight"
          label="重量"
          width="width"
          align="center">
        </el-table-column>
        <el-table-column
          prop="skuDefaultImg"
          label="默认图片"
          width="width"
          align="center">
          <template slot-scope="{row}">
            <img style="width:100px" :src="row.skuDefaultImg">
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SpuForm from "./SpuForm";
import SkuForm from "./SkuForm";
export default {
  name: "Spu",
  data() {
    return {
      spuList: [],
      category1Id: "",
      category2Id: "",
      category3Id: "",
      // 当前页码
      page: 1,
      // 页面大小
      limit: 3,
      // 全部页面数
      total: 0,
      // 控制三级联动是否禁用 | 查看与添加SPU表单的切换 | 添加SKU表单的切换
      isShow: 0, // 0代表展示SPU数据，1代表添加与修改SPU表单的切换，2代表添加SKU表单
      // 控制展示sku列表是否显示
      dialogVisible:false,
      // 暂时保存当前行的spu数据
      showSkuList:{},
      skuList:[]
    };
  },
  components: { SpuForm, SkuForm },
  methods: {
    getCategoryId(params) {
      // 将三级分类id保存
      this.category1Id = params.category1Id;
      this.category2Id = params.category2Id;
      this.category3Id = params.category3Id;
      // 获取Spu列表
      this.getSpuList();
    },
    // 发送请求获取SPU列表
    async getSpuList() {
      const res = await this.$API.spu.reqGetSpuList({
        page: this.page,
        limit: this.limit,
        category3Id: this.category3Id,
      });
      if (res.code === 200) {
        this.total = res.data.total;
        this.spuList = res.data.records;
      }
    },
    // 页面大小发生变化
    handleSizeChange(page) {
      this.limit = page;
      this.getSpuList();
    },
    // 当前页发生变化
    handleCurrentChange(page) {
      this.page = page;
      this.getSpuList();
    },
    // 添加spu按钮
    addSpu() {
      // 触发添加模式的初始化
      this.$refs.initSpu.initSpuFormAdd();
      // 切换为添加或切换Spu区组件
      this.isShow = 1;
    },
    // 子组件改变 isShow
    changeIsShow({ isShow }) {
      this.isShow = isShow;
      // 重新获取数据，因为只是组件内部中的小组件发生跳转，并不会引起外层组件的重新挂载，所以在
      // mounted钩子中进行重新获取数据，行不同
      this.getSpuList();
    },
    // 修改spu按钮
    editSpu(row) {
      // 触发编辑模式的初始化
      // 为什么不能在spuForm的mounted函数中进行初始化？
      // 因为在父组件spu挂载完成之后，子组件spuForm也已经完成了挂载，当切换编辑场景时并不会再次触发spuForm的mounted函数
      this.$refs.initSpu.initSpuFormEdit(row);
      // 修改场景
      this.isShow = 1;
    },
    // 气泡确认框确认删除所选spu
    async confirmDelete(id) {
      const res = await this.$API.spu.reqDeleteSpu({ spuId: id });
      if (res.code === 200) {
        this.getSpuList();
        return this.$message.success("删除成功");
      }
    },
    // 添加sku按钮
    addSku(row) {
      // 将当前行的数据传递给skuForm
      this.$refs.initSku.initSkuForm(row);
      this.isShow = 2;
    },
    // 查看当前spu的所有sku列表
    async lookSkuList(row){
      this.showSkuList = row
      this.dialogVisible = true
      const res = await this.$API.spu.reqGetSkuListBySpuId({spuId:row.id})
      if(res.code === 200){
        this.skuList = res.data
      }
    }
  },
};
</script>

<style lang="less" scoped>
.show {
  margin-top: 20px;
  .btn {
    margin-bottom: 20px;
  }
}
</style>